<script lang="ts" setup>
import { onMounted, Ref, ref } from 'vue';
import headers from '../../components/headers.vue';
import asides from '~/src/components/asides.vue';
import { getBannerAPI, getUserInfoAPI, getArticleAPI, getNearListAPI } from '../../apis/home'
// import './home.scss'
import { useRouter } from 'vue-router';
import useDataStore from '../../store';
import { storeToRefs } from 'pinia';
import { isScrolledToBottom, throttle } from '../../utils/tool';

import { AxiosResponse } from 'axios';
import { ElMessage } from 'element-plus';
// Axios响应数据的类型
interface AxiosRes extends AxiosResponse {
    code?: number
}



const dataStore = useDataStore()

const router = useRouter()

defineOptions({
    name: 'Home'
})

onMounted(() => {
    // router.go(0)
})

/* ------------------------------- 获取banner列表 ------------------------------- */
let bannerList: Ref = ref([])
const getBanner = async () => {
    let { data } = await getBannerAPI()
    bannerList.value = data
}
getBanner()

/* ------------------------------- 点击切换banner ------------------------------- */
let bannerIndex = ref(0)    //当前banner小图的索引
let bannerWrap = ref()  //banner容器对象
// 点击小图切换大图的索引
const changeBannerIndexAction = (id: number) => {
    bannerIndex.value = id - 1
    bannerWrap.value.setActiveItem(bannerIndex.value)
    bannerWrap.value.autoplay = true
}
const bannerChangeAction = (idx: number) => {
    bannerIndex.value = idx
}

/* ------------------------- 获取当前用户的信息 ------------------------ */
// let userInfo = JSON.parse(localStorage.getItem('userInfo'))
// let userInfo = ref()
// const getUserInfo = async () => {
//     let data = await getUserInfoAPI(user_id)
//     if (data.code === 200) {
//         userInfo.value = data.data[0]
//     }
// }
// getUserInfo()
const { userInfo } = storeToRefs(dataStore)


/* -------------------------------- 请求所有文章数据 -------------------------------- */

interface List {
    [key: string]: any
}
let articleList = ref()
let page = ref(1)
let lastTime = 0    // 上一次执行getArticle函数时候的时间戳，用于节流
const getArticle = async (type_id: number, page: number) => {
    let data: AxiosRes = await getArticleAPI(type_id, page) as AxiosRes
    if (data.code === 200) {
        articleList.value = [...articleList.value, ...data.data]
    }
}
getArticle(0, page.value)

/* --------------------------------- 点击切换分类项 -------------------------------- */
const changeAction = (navIdx: number) => {
    articleList.value = []
    getArticle(navIdx, page.value)
}

/* --------------------------------- 点击进入详情页 -------------------------------- */
const toDetailAction = (article_id: string, user_id: string) => {
    router.push({ name: 'detail', query: { article_id, user_id } })
}


/* ------------------------------- 滚动到底部加载更多文章 ------------------------------ */
window.onscroll = () => {
    // 当页面滚动到底部 且 这次执行getArticle的事件戳与上一次执行getArticle的时间戳相差500以上才能执行
    if (isScrolledToBottom(document.documentElement) && new Date().getTime() - lastTime > 500) {
        page.value++
        getArticle(0, page.value)
        lastTime = new Date().getTime()     // 把这次时间戳变成上次时间戳，用于下次的对比
    }
}

/* --------------------------------- 最近更新板块 --------------------------------- */
// interface NearRes extends AxiosRes {
//     userResult?: any
// }
interface NearRes extends AxiosRes {
    userResult?: any
}

let nearList: Ref = ref([])    //最近更新列表
const getNearList = async () => {
    let data: NearRes = await getNearListAPI()
    if (data.code === 200) {
        nearList.value = data.userResult
    }
}
getNearList()
// 点击手动刷新最近更新板块
const refreshNearAction = () => {
    getNearList()
}

/* --------------------------------- 点击退出登录 --------------------------------- */
const logoutAction = () => {
    console.log('logout');
    sessionStorage.removeItem('data')
    router.go(0)
    ElMessage({
        message: '退出登录成功',
        type: 'success'
    })
}

/* ------------------------------- 点击跳转到用户个人空间页面 ------------------------------ */
const toMeAction = (type: number) => {
    router.push({ name: 'me', query: { user_id: userInfo.value.user_id, meType: type } })
}





</script>

<template>
    <el-backtop :right="50" :bottom="100"></el-backtop>
    <div class="page">
        <div class="container">
            <div class="headers">
                <headers :searchFlag="true" :userInfo="userInfo"></headers>
            </div>
            <div class="temp"></div>
            <div class="main">
                <div class="main-top">
                    <div class="top-left">
                        <div class="top-left-banner">
                            <el-carousel ref="bannerWrap" direction="vertical" :interval="3000"
                                :initial-index="bannerIndex" :autoplay="true" @change="bannerChangeAction">
                                <el-carousel-item v-for="item in bannerList" :key="item.banner_id">
                                    <div>
                                        <div class="img-text">{{ item.banner_text }}</div>
                                        <img :src="item.banner_path" alt="">
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="top-left-img">
                            <div :class="{ noActive: item.banner_id - 1 !== bannerIndex }"
                                @click="changeBannerIndexAction(item.banner_id)" v-for="item in bannerList"
                                :key="item.banner_id">
                                <img :src="item.banner_path" alt="">
                            </div>
                        </div>

                    </div>
                    <div class="top-right">
                        <div class="top-right-poster"></div>
                        <div class="top-right-user" ref="topRightUserRef">
                            <div class="user-info">
                                <div class="user-img" v-if="userInfo"><img :src="userInfo.user_avatar" alt=""></div>
                                <div class="user-img" v-else><img src="../../assets/images/default_avatar.png" alt="">
                                </div>
                                <div class="user-name">
                                    <div>{{ userInfo ? userInfo.user_name : '未登录' }}</div>
                                    <div>{{ userInfo ? userInfo.user_introduction : '' }}</div>
                                </div>
                                <div class="user-icon">
                                    <i class="iconfont icon-pinglunxiao"></i>
                                    <i class="iconfont icon-fenxiang"></i>
                                </div>
                            </div>
                            <div class="user-option">
                                <div class="option-item" @click="toMeAction(2)"><span>◆ </span>我的点赞</div>
                                <div class="option-item" @click="toMeAction(3)"><span>◆ </span>我的收藏</div>
                                <div class="option-item" @click="toMeAction(1)"><span>◆ </span>个人中心</div>
                                <div class="option-item" @click="logoutAction"><span>◆ </span>退出登录</div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-content">
                    <div class="content-article">
                        <el-tabs class="demo-tabs" @tab-change="changeAction">
                            <el-tab-pane label="全部"></el-tab-pane>
                            <el-tab-pane label="球鞋测评"></el-tab-pane>
                            <el-tab-pane label="潮流穿搭"></el-tab-pane>
                            <el-tab-pane label="实战利器"></el-tab-pane>
                            <el-tab-pane label="休闲慢跑"></el-tab-pane>
                            <el-tab-pane label="好物分享"></el-tab-pane>
                            <el-tab-pane label="专业竞速"></el-tab-pane>
                            <el-tab-pane label="谍照首发"></el-tab-pane>
                            <el-tab-pane label="运动装备"></el-tab-pane>
                        </el-tabs>
                        <div class="article-main">
                            <div @click="toDetailAction(item.article_id, item.article_author_id)" class="main-item"
                                v-for="item in articleList" :key="item.article_id">
                                <div class="item-left">
                                    <div class="left-title">{{ item.article_title }}</div>
                                    <div class="left-introduction">{{ item.article_introduction }}</div>
                                    <div class="left-author">
                                        <div>{{ item.user_name }}</div>
                                        <div>
                                            <el-icon>
                                                <Pointer />
                                            </el-icon>
                                            {{ item.article_like }}
                                        </div>
                                    </div>
                                </div>
                                <div class="item-right"><img :src="item.article_coverimg" alt=""></div>
                            </div>
                        </div>
                    </div>
                    <div class="content-aside">
                        <div class="lately">
                            <div class="lately-title" @click="refreshNearAction">
                                <el-icon color="#8e8cd8">
                                    <Timer />
                                </el-icon>
                                <el-tooltip class="box-item" effect="light" content="点击刷新" placement="top-start">
                                    最近更新
                                </el-tooltip>
                            </div>
                            <div class="lately-content" v-for="item in nearList" :key="new Date().getTime()">
                                <div class="content-item">
                                    <div class="item-author">
                                        <div class="author-img"><img :src="item.user_avatar" alt="">
                                        </div>
                                        <div class="author-text">
                                            <div>{{ item.user_name }}</div>
                                            <div>动态数量：{{ item.articleResult.length }}</div>
                                        </div>
                                    </div>
                                    <div class="item-article">
                                        <div class="article-item" v-for="i in item.articleResult" :key="i.article_id">
                                            <i></i>
                                            <div>{{ i.article_title }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flash">
                            <div class="flash-title">
                                <el-icon color="#8e8cd8">
                                    <Dish />
                                </el-icon>
                                鞋狗资讯
                            </div>
                            <div class="flash-content">
                                <div class="flash-item">
                                    <div class="flash-item-time">
                                        <div>昨天</div>
                                        <div>17:40</div>
                                    </div>
                                    <div class="flash-item-title">adidas「顶级排面」过气？打脸来了</div>
                                    <div class="flash-item-text">
                                        <div>你的童年记忆中，有 Y-3 吗？这个火遍 80 后青春的潮流符号（也很可能是出现在莆田鞋上），今年再次回归了。Y-3——阿迪达斯旗下高端运动品牌
                                            ，最近发布了 2023 年春夏系列的第二个篇章。光看官方释出的宣传片和海报，就已经让人对这一一季新品充满遐想空间。</div>
                                        <div>
                                            <span>原文链接</span>
                                            <span>分享到 <i class="iconfont icon-weibo"></i> <i
                                                    class="iconfont icon-weixin"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flash-item">
                                    <div class="flash-item-time">
                                        <div>昨天</div>
                                        <div>11:00</div>
                                    </div>
                                    <div class="flash-item-title">Beats 前 CEO 做了款「音乐球鞋」，让你从脚开始感受「动次打次」</div>
                                    <div class="flash-item-text">
                                        <div>现场音乐的其中一个魅力在于「氛围感」。
                                            Beats 前 CEO Susan Paley
                                            近日，Paley 的洛杉矶初创企业 DropLabs 推出了旗下第一代产品 EP 01。通过在球鞋中底设置振动装置，EP 01
                                            可根据用户正在听的音乐或声音设计对应的振动方案。</div>
                                        <div>
                                            <span>原文链接</span>
                                            <span>分享到 <i class="iconfont icon-weibo"></i> <i
                                                    class="iconfont icon-weixin"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flash-item">
                                    <div class="flash-item-time">
                                        <div>前天</div>
                                        <div>17:00</div>
                                    </div>
                                    <div class="flash-item-title">耐克将推出「NFC 球鞋」，但似乎是一个鸡肋的存在</div>
                                    <div class="flash-item-text">
                                        <div>还记得耐克在去年 NBA 赛季推出的 「NFC 球衣」吗？
                                            只要用智能手机轻触球衣下方的 NFC 芯片，就可以实时浏览对应 NBA
                                            球队和球员的数据、球赛精彩片段，甚至是球员灵魂深处的私人歌单。听起来有一丢丢的炫酷。</div>
                                        <div>
                                            <span>原文链接</span>
                                            <span>分享到 <i class="iconfont icon-weibo"></i> <i
                                                    class="iconfont icon-weixin"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="flash-more"><a href="./html/flash.html">查看更多</a></div> -->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<style scoped lang='scss'>
@import url(./home.scss);
</style>